<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #wrap {
            height: 719px;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
        }
        #head {
            height: 120px;
            width: 100%;
            background-color: #66CCCC;
            text-align: center;
            position: relative;
        }
        #foot {
            width: 100%;
            height: 126px;
            background-color: #CC9933;
            position: relative;
        }
        #wrap .logGet {
            height: 408px;
            width: 368px;
            position: absolute;
            background-color: #FFFFFF;
            top: 20%;
            right: 15%;
        }
        .logC a button {
            width: 100%;
            height: 45px;
            background-color: #ee7700;
            border: none;
            color: white;
            font-size: 18px;
        }
        .logGet .logD.logDtip .p1 {
            display: inline-block;
            font-size: 28px;
            margin-top: 30px;
            width: 86%;
        }
        #wrap .logGet .logD.logDtip {
            width: 86%;
            border-bottom: 1px solid #ee7700;
            margin-bottom: 60px;
            margin-top: 0px;
            margin-right: auto;
            margin-left: auto;
        }
        .logGet .lgD img {
            position: absolute;
            top: 12px;
            left: 8px;
        }
        .logGet .lgD input {
            width: 100%;
            height: 42px;
            text-indent: 2.5rem;
        }
        #wrap .logGet .lgD {
            width: 86%;
            position: relative;
            margin-bottom: 30px;
            margin-top: 30px;
            margin-right: auto;
            margin-left: auto;
        }
        #wrap .logGet .logC {
            width: 86%;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }


        .title {
            font-family: "宋体";
            color: #FFFFFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
            font-size: 36px;
            height: 40px;
            width: 30%;
        }

        .copyright {
            font-family: "宋体";
            color: #FFFFFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
            height: 60px;
            width: 40%;
            text-align:center;
        }


        #foot .copyright .img {
            width: 100%;
            height: 24px;
            position: relative;
        }
        .copyright .img .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 22px;
            vertical-align: middle;
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }

        .copyright .img .icon1 {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 22px;
            vertical-align: middle;
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }
        .copyright .img .icon2 {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 22px;
            vertical-align: middle;
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }
        #foot .copyright p {
            height: 24px;
            width: 100%;
        }
        #button2{
            position: absolute;
            left: 53%;
        }
    </style>
</head>

<body>
<div class="header" id="head">
    <div class="title">铭·绘本馆租借</div>

</div>

<div class="wrap" id="wrap">
    <div class="logGet" id="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
            <p class="p1">登录</p>
        </div>
        <!-- 输入框 -->
        <div class="lgD">
            <img src="imgs/loginimgs/logName.png" width="20" height="20" alt=""/>
            <input v-model="customer.phone" type="text"
                   placeholder="输入用户名/手机号" />
        </div>
        <div class="lgD">
            <img src="imgs/loginimgs/logPwd.png" width="20" height="20" alt=""/>
            <input v-model="customer.password" type="password"
                   placeholder="输入用户密码" />
        </div>
        <div id="logC" class="logC">
            <button style="width: 40%" type="button" class="btn btn-primary" @click="login()">登录</button>
            <button id="button2" style="width: 40%" class="btn btn-primary" data-toggle="modal" data-target="#myModal">注册</button>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">个人信息注册</h4>
                    </div>
                    <!--模态框-->
                    <div class="modal-body">
                        <div class="form-group">
                            <input v-model="customer.phone" type="text" class="form-control" name="phone" placeholder="请输入手机号/邮箱">
                        </div>
                        <div class="form-group">
                            <input v-model="customer.password" type="password" class="form-control" name="password" placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <input v-model="customer.name" type="text" class="form-control" name="name" placeholder="请输入您的姓名">
                        </div>
                        <div class="form-group">
                            <input v-model="customer.address" type="text" class="form-control" name="adddress" placeholder="请输入您的居住地">
                        </div>

                        <div class="form-group">
                            <template>
                                <div class="block">
                                    <el-date-picker
                                            v-model="customer.birthday"
                                            type="date"
                                            placeholder="选择出生日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" @click="enroll()">注册</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

<script>
    new Vue(
        {
            el:'#logGet',
            data(){
                return{
                    customer:{
                        phone:'',
                        password:'',
                        name:'',
                        role:'',
                        address:'',
                        balance:'',
                        vip:'',
                        birthday:'',
                        photo:'',
                        creatby:'',
                        cretatime:''
                    },
                    pickerOptions: {
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                    value1: '',
                }

            },
            methods: {
                login:function () {
                    var _this = this;
                    axios.get('../api/customer/findCustomer', {
                        params: {
                            phone: _this.customer.phone,
                            password: _this.customer.password
                        }})
                            .then(function (response) {
                                if (response.data.code == 2002) {
                                    window.location.href = "show-index.html";
                                }else if (response.data.code == 2001) {
                                    window.location.href = "admin-index.html";
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    },
                enroll:function (){
                    var _this = this;
                    axios.post('../api/customer/enroll',_this.customer)
                        .then(function (response) {
                            if (response.data.code == 2001){
                                window.location.href="admin-login.html";
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        }
    )
</script>

<div class="footer" id="foot">
    <div class="copyright">
        <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p>
        <div class="img">
            <i class="icon"></i><span>联系邮箱：xxxxxxxxxxx.xx.com</span>
        </div>

        <div class="img">
            <i class="icon1"></i><span>联系地址：家里蹲大学</span>
        </div>

        <div class="img">
            <i class="icon2"></i><span>联系电话：123456个8</span>
        </div>
    </div>

</div>


</body>
</html>